<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="日例会" data-page-identification="x_zugnuq856n">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_7vqxc7rhzg 自定义模板_y7xb4613m4 -->
            <!--            分析记录-->
            <a-modal :visible="state.analysisVisible" title="分析记录" :footer="null">
                <div class="analy-table">
                    <a-table :columns="analyColumns" :data-source="state.analyData">
                        <template #bodyCell="{ column, record, text }">
                            <template v-if="column.dataIndex === 'opration'">
                                <a-button type="link">详情 </a-button>
                            </template>
                        </template>
                    </a-table>
                </div>
            </a-modal>
            <!--            分析记录-->
            <div class="body">
                <div class="top-search">
                    <a-row :gutter="24">
                        <a-col :span="6">
                            <a-form-item label="客户成功经理">
                                <a-select
                                    allow-clear
                                    show-search
                                    v-model:value="state.searchForm.customerSuccessManager"
                                    :options="state.allUser"
                                    placeholder="请选择"
                                    :field-names="{ label: 'name', value: 'name' }"
                                    :filterOption="
                                        (input, option) => {
                                            return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                                    @change="getData"
                                    :getPopupContainer="getPopupContainer"
                                />
                            </a-form-item>
                        </a-col>

                        <a-col :span="6">
                            <a-form-item label="区域" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                                <a-select
                                    allow-clear
                                    show-search
                                    v-model:value="state.searchForm.areaId"
                                    :options="state.areaNameList"
                                    placeholder="请选择"
                                    :field-names="{ label: 'label', value: 'value' }"
                                    :filterOption="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                                    @change="getData"
                                    :getPopupContainer="getPopupContainer"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item
                                label="工厂名称"
                                :rules="[{ required: false, message: '请选择工厂', trigger: 'blur' }]"
                                name="projectId"
                            >
                                <a-select
                                    allow-clear
                                    show-search
                                    v-model:value="state.searchForm.factoryId"
                                    :options="state.projectList"
                                    placeholder="请选择"
                                    :field-names="{ label: 'label', value: 'value' }"
                                    :filterOption="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                                    :max-tag-count="2"
                                    @change="getData"
                                    :getPopupContainer="getPopupContainer"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="2">
                            <a-space>
                                <a-button @click="resetData" ghost type="primary">重置</a-button>
                            </a-space>
                        </a-col>
                    </a-row>
                </div>
                <div class="content">
                    <div class="table-top">
                        <div class="tip">日例会记录列表</div>
                        <!--                        <a-space>-->
                        <!--                            <a-button type="primary">生成分析</a-button>-->
                        <!--                            <a-button type="primary">分析记录</a-button>-->
                        <!--                            &lt;!&ndash;                          <a-button>新建</a-button>&ndash;&gt;-->
                        <!--                        </a-space>-->
                    </div>
                    <div class="kb-table-box">
                        <a-table
                            :columns="columns"
                            :data-source="state.dataSource"
                            bordered
                            :pagination="pagination"
                            :total="pagination.total"
                        />
                    </div>
                </div>
            </div>
            <!-- end vid_7vqxc7rhzg 自定义模板_y7xb4613m4 -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        },
        'projectId': {
            type: [String, Number],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    onMounted(() => {
        getAreaList()
        getAllUser()
        getData()
    })
    const state = reactive({
        searchForm: {
            factoryId: undefined,
            areaId: undefined,
            customerSuccessManager: undefined
        },
        dataSource: [],
        areaNameList: [],
        projectList: [],
        allUser: [],
        analysisVisible: false
    })
    const columns = ref([
        {
            title: '记录日期',
            align: 'center',
            dataIndex: 'recordDate',
            ellipsis: true
        },
        {
            title: '客户成功经理',
            align: 'center',
            dataIndex: 'customerSuccessManager',
            ellipsis: true
        },
        {
            title: '昨日工作总结(重点汇报问题)',
            align: 'center',
            ellipsis: true,
            children: [
                {
                    title: '区域',
                    align: 'center',
                    dataIndex: 'areaName',
                    ellipsis: true
                },
                {
                    title: '工厂全称',
                    align: 'center',
                    dataIndex: 'factoryName',
                    ellipsis: true
                },
                {
                    title: '跟踪项目',
                    align: 'center',
                    dataIndex: 'projectName',
                    ellipsis: true
                },
                {
                    title: '项目所处阶段',
                    align: 'center',
                    dataIndex: 'milepostName',
                    ellipsis: true
                },
                {
                    title: '拜访情况或协同情况',
                    align: 'center',
                    dataIndex: 'visitCollaborationSituation',
                    ellipsis: true
                },
                {
                    title: '项目阶段问题',
                    align: 'center',
                    dataIndex: 'stageIssues',
                    ellipsis: true
                },
                {
                    title: '跟踪情况',
                    align: 'center',
                    dataIndex: 'trackingSituation',
                    ellipsis: true
                }
            ]
        },
        {
            title: '今日工作计划(重点明确协同资源)',
            children: [
                {
                    title: '拜访情况或协同情况',
                    align: 'center',
                    dataIndex: 'todayVisitCollaborationSituation',
                    ellipsis: true
                },
                {
                    title: '跟进事项',
                    align: 'center',
                    dataIndex: 'todayTrackingSituation',
                    ellipsis: true
                }
            ],
            align: 'center',
            ellipsis: true
        },
        {
            title: '拜访/协同情况',
            align: 'center',
            dataIndex: 'visitCollaborationSituationDetail',
            ellipsis: true
        },
        {
            title: '项目事件',
            align: 'center',
            dataIndex: '',
            ellipsis: true
        }
    ])
    function getData() {
        post('/solution-ppm/api/v2/built-in-system-ppm/customer_daily/search', {
            'orderBy': 'created_time',
            'distinct': false,
            'conditions': [
                {
                    'field': 'customer_success_manager',
                    'operator': 'EQ',
                    'value': state.searchForm.customerSuccessManager,
                    'secondValue': {},
                    'valueType': 'STRING'
                },
                {
                    'field': 'area_id',
                    'operator': 'EQ',
                    'value': state.searchForm.areaId,
                    'secondValue': {},
                    'valueType': 'NUMBER'
                },
                {
                    'field': 'factory_id',
                    'operator': 'EQ',
                    'value': state.searchForm.factoryId,
                    'secondValue': {},
                    'valueType': 'NUMBER'
                }
            ],
            'pageNumber': pagination.value.current,
            'pageSize': pagination.value.pageSize
        }).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.dataSource = data.data
        })
    }
    function resetData() {
        state.searchForm.areaId = state.searchForm.customerSuccessManager = state.searchForm.factoryId = undefined
        getData()
    }
    // 区域
    function getAreaList() {
        get('/solution-ppm/api/v2/built-in-system-ppm/work_order/area_info').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.areaNameList = data.data.map(item => {
                return {
                    label: item.areaName,
                    value: item.areaCode
                }
            })
            state.areaNameList.unshift({ label: '全部', value: '全部' })
        })
    }
    function getFactory() {
        get(
            `/solution-ppm/api/v2/built-in-system-ppm/meeting_question/get_project_by_area_code/${state.searchForm.areaName}`
        ).then(data => {
            state.projectList = data.data.map(item => {
                return {
                    label: item.projectShortName,
                    value: item.projectId,
                    pmName: item.pmName,
                    projectDirector: item.projectDirector
                }
            })
        })
    }
    function getAllUser() {
        get('/solution-ppm/api/v2/built-in-system-ppm/pmgf/get/allUser').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.allUser = data.data.userDtoList
        })
    }
    // 分页方法
    const pageSizeChange = (current, size) => {
        pagination.value.current = current
        pagination.value.pageSize = size
        getData()
    }
    const pageChange = (page, pageSize) => {
        pagination.value.current = page
        pagination.value.pageSize = pageSize
        getData()
    }
    const pagination = ref({
        current: 1,
        pageSize: 10,
        showSizeChanger: true,
        showQuickJumper: true,
        total: '0',
        pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
        showTotal: total =>
            `共 ${total} 个项目 第${pagination.value.current}/${Math.ceil(
                pagination.value.total / pagination.value.pageSize
            )}页`,
        onShowSizeChange: pageSizeChange,
        onChange: pageChange
    })
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }
    /*样式*/
    .body {
        height: 100%;
    }
    .top-search {
        padding: 24px 24px 0 24px;
        border-radius: 4px;
        background-color: #fff;
        margin-bottom: 16px;
    }
    .content {
        padding: 24px;
        background-color: #fff;
        border-radius: 4px;
        height: 100%;
    }
    .table-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }
    .tip {
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
        line-height: 16px;
        border-left: 4px solid #3875ff;
        padding-left: 4px;
        height: 16px;
    }
    .kb-table-box:deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #3875ff;
        color: #fff;
        font-weight: 600;
        padding: 0;
        border-right: 1px solid #d9d9d9 !important;
        position: relative;
    }
    .kb-table-box :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        border-bottom: 1px solid #d9d9d9;
        padding: 0 5px;
        word-break: break-all;
    }
</style>
